<!DOCTYPE html>
<html>


<head lang="en">
    <meta charset="UTF-8">

    <title>Visitor Management System</title>

    <!-- INCLUDE ALL CSS STYLESHEETS -->

    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="css/visitor.css">
    <link rel="stylesheet" href="css/override_jquery_ui_styles.css">
    <link rel="stylesheet" href="css/override_jquery_dialog_styles.css">
    <link rel="stylesheet" href="css/controls.css">

    <!-- INCLUDE ALL JAVASCRIPT SNIPPETS -->

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>




</head>

<body>
<div class="main_wrapper">

    <!-- Visitor Management System Header Area -->

    <div class="header_wrapper">
        <h3> SIMTECH VISITOR MANAGEMENT SYSTEM </h3>
    </div>
    <!-- Menu Bar of the Visitor Management System -->

    <div class="menu_wrapper" >
        <div id="tabs" class="tabs_wrapper">
            <ul class="nav-tabs">
                <li><a href="#tabs-1">VISITOR INFO</a></li>
                <li class="nav-tabs"><a href="#tabs-2">HOME</a></li>
                <li class="nav-tabs"><a href="#tabs-3">ABOUT</a></li>
                <li><a href="#tabs-4">COMPANY INFO</a></li>
                <li><a href="#tabs-5">IMPORT COMPANY</a></li>
                <li><a href="#tabs-6">IMPORT PERSON</a></li>
            </ul>

        </div>
    </div>

    <!-- Wraps the contents of the page -->
    <div class="content_wrapper">

        <!-- TABULAR 1 - VISITOR INFO TAB -->

        <div id="tabs-1" class ="section_wrapper">
        <table class="tbl_vinfo" id="tbl_vinfo">
            <!-- TITLE -->
            <tr>
                <td class="vlabel"><label for="tdrop_title">Title </label> </td>
                <td>
                <select name="tdrop_title" class="vdropdown" id="tdrop_title" >
                    <option selected="selected">Mr</option>
                    <option>Dr</option>
                    <option >Mrs</option>
                    <option>Miss</option>
                </select>
                </td>
                <td class="vlabel">Company Name </td>
                <td><input type="text" class="text-box " name="tbox_cname" placeholder="Enter your company name"></td>

            </tr>
            <tr>
                <td class="vlabel">Name </td>
                <td><input type="text" class="text-box" name="tbox_username" placeholder="Enter your name"></td>

                <td class="vlabel">Designation </td>
                <td><input type="text" class="text-box" list="Desig_list" name="tbox_designation" placeholder="Select or Enter your designation"></td>
                <datalist class="Desig_list" id="Desig_list">
                    <option value="Student">
                    <option value="Analyst">
                    <option value="Director">
                    <option value="Manager">
                    <option value="Research Engineer">
                </datalist>
            </tr>
            <tr>
                <td class="vlabel">Department  </td>
                <td><input type="text" list="Dep_list" class="text-box" name="tbox_department" placeholder="Select or Enter your department"></td>
                <datalist class="Dep_list" id="Dep_list">
                    <option value="Manufactoring">
                    <option value="Electrical">
                    <option value="Mechanical">
                    <option value="Software">
                    <option value="Research">
                </datalist>

                <td class="vlabel">Designation Group </td>
                <td><input type="text" class="text-box" list="DesigGrp_list" name="tbox_designationgp" placeholder="Select or Enter your designation Group"></td>
                <datalist class="Desig_list" id="DesigGrp_list">
                    <option value="Staff">
                    <option value="Executive">
                    <option value="Promoter">
                </datalist>
            </tr>
            <tr>
                <td class="vlabel">E-Mail  </td>
                <td><input type="text" class="text-box" name="tbox_email" placeholder="Enter your Email Id"></td>

                <td class="vlabel">HandPhone  </td>
                <td><input type="text" class="text-box" name="tbox_hp" placeholder="Enter your Handphone Number"></td>

            </tr>
            <tr>
                <td class="vlabel">Telephone  </td>
                <td><input type="text" class="text-box" name="tbox_telephone" placeholder="Enter your Work Phone Number"></td>

                <td class="vlabel">Fax  </td>
                <td><input type="text" class="text-box" name="tbox_fax" placeholder="Enter your Fax Number"></td>

            </tr>


        </table>
            <div id="dyn_div">


            </div>
            <div class="button_wrapper">
                <button id="save" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Save Visitor Info</span></button>

                <button id="newFields">Add New Fields</button>
            </div>


            <div id="dialog-form" title="Create New Fields">

                <form>
                        <table class="DT_newField">
                            <tr>
                                <td><label for="Dlabelname">Label Name  </label></td>
                                <td><input type="text" name="Dlabelname"  id="Dlabelname" class="text ui-widget-content ui-corner-all">
                                </td>
                            </tr>
                            <tr>
                                <td><label for="D_controls">Control Type </label></td>
                                <td><select name="D_controls" id="D_controls" >
                                    <option selected="selected">TextBox</option>
                                    <option>Radio Button</option>
                                    <!--<option >Check Box</option>-->
                                </select></td>
                            <tr>
                                <td><label for="DValues">Values  </label></td>
                                <td><input type="text" name="DValues" id="DValues" class="text ui-widget-content ui-corner-all" >
                                </td>
                            </tr>
                            <!--<tr>
                                <td><label for="DMandate">Mandatory  </label></td>
                                <td><input type="checkbox" name="DMandate" id="DMandate" class="text ui-widget-content ui-corner-all" >
                                </td>
                            </tr>-->
                        <!-- Allow form submission with keyboard without duplicating the dialog button -->
                            <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                        </table>
                </form>
            </div>
        </div>




        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>



    </div>

</div>

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });

    $(function() {
        var dialogEntry, form,
                name = $( "#Dlabelname" ),
                controls = $( "#D_controls" ),
                values = $( "#DValues" ),
                allFields = $( [] ).add( name ).add( controls ).add( values),
                tips = $( ".validateTips" );



            dialogEntry = $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create new Field": addField,
                Cancel: function() {
                    dialogEntry.dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
                allFields.removeClass( "ui-state-error" );
            }
        });

        form = dialogEntry.find( "form" ).on( "submit", function( event ) {
            event.preventDefault();
            addField();
        });

        $("#newFields").button().on( "click", function() {
            dialogEntry.dialog("open");
        });

        var myApp = angular.module("myApp",[]);

        function addField() {

            var name = $("#Dlabelname").val();
            var values = $("#DValues").val();
            var mandate = $("#DMandate").checked;
            var control = $("#D_controls").val();
            if(control == "TextBox") {
                $("#tbl_vinfo tr:last").after("<tr>" +
                        "<td class=\"vlabel\">" + name + "</td>" +
                        "<td> " +
                        "<input type=text\" " + "class = \"text-box\">" +
                        "</td></tr>");
            }

            if(control == "Radio Button")
            {
                var r_array = values.split(",");
                var fHtml = "<tr>" + "<td class=\"vlabel\">" + name + "</td><td>";
                for (var i = 0; i < r_array.length; i++)
                {
                    fHtml +=  "<input type=\"radio\" name=\" + name \" + value=\"" + r_array[i] + "\">" +
                               r_array[i];

                }
                fHtml += "</td>";
                $("#tbl_vinfo tr:last").after(fHtml);


            }
            //document.getElementById("dyn_div").innerHTML = htmlText ;
            dialogEntry.dialog( "close" );
        }



    });



</script>

</body>
</html>